<template>
    <div id="Breadcrumb">
        <div class="Breadcrumb_con">
            <div style="color: white;display: flex;align-items: center;padding-left: 10px;">
                <el-icon color="#1E95F5" style="margin-right: 10px;">
                    <LocationFilled />
                </el-icon>
                <div style="margin-right: 10px;">位置:</div>
            </div>
            <el-breadcrumb style="color: white;" :separator-icon="ArrowRight">
                <el-breadcrumb-item v-for="(item,index) in RouteArray" >
                    {{ item.title }} 
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted,watch } from 'vue';
import { ArrowRight, LocationFilled } from '@element-plus/icons-vue';
import { useRoute } from "vue-router";
const $route = useRoute();
const RouteArray=ref([]);
onMounted(() => {
    
    RouteArray.value=[];
    $route.matched.forEach((item,index)=>{
        let obj={};
        obj.title=item.meta.title;
        obj.route=item.name;
        RouteArray.value.push(obj);
    })
    console.log(RouteArray.value);
})
watch($route,(ov,nv)=>{
    console.log(nv);
    
    RouteArray.value=[];
    $route.matched.forEach((item,index)=>{
        let obj={};
        obj.title=item.meta.title;
        obj.route=item.name;
        RouteArray.value.push(obj);
    })
})
</script>

<style scoped>
#Breadcrumb {
    margin-top: 10px;
    padding: 0px 10px;
}
:deep(.el-breadcrumb__inner){
    color: white;
}
.Breadcrumb_con {
    display: flex;
    height: 45px;
    align-items: center;
    background-color: #2F4052;
}
</style>

<style lang='less'>
#Breadcrumb {
    .el-breadcrumb__item:last-child .el-breadcrumb__inner,.el-breadcrumb__inner.is-link {
        color: white;
    }
}
</style>